<template>
  <div class="box">
    <!-- 右上box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Right"
      title="告警统计"
    >
      <!-- 告警统计 -->
      <div slot="content" class="MainCoal-box-content">
        <div class="sensorSum">
          <p class="sum">今日告警数量</p>
          <p>
            <span class="num" style="color: rgba(0, 253, 255, 100)">{{todayCount}}</span
            ><span class="piece">次</span>
          </p>
        </div>
        <div class="charttitle">今日告警分析</div>
        <div class="outage" style="height:159px">
          <LineChart
            :chartData="todayLists"
            :text="['告警']"
            :area="true"
            unit="次"
            :color="['#00F9FB']"
          />
        </div>
        <div class="charttitle">今日告警区域</div>
        <div class="Chart">
          <div class="chat">
            <RoseChart :data="todayAreaLists" :color="color" />
          </div>
          <div class="cont">
            <Legend1
              v-for="(item, idx) in todayAreaLists"
              :key="item.x"
              class="item"
              :name="item.x"
              :num="item.y"
              :color="color[idx]"
              unit=""
            ></Legend1>
          </div>
        </div>
        <div class="sensorSum">
          <p class="sum">近7天告警数量</p>
          <p>
            <span class="num" style="color: rgba(255, 209, 1, 100)">{{servenCount}}</span
            ><span class="piece">次</span>
          </p>
        </div>
        <div class="charttitle">近七天告警分析</div>
        <div class="outage" style="height:159px">
          <LineChart
            :chartData="servenLists"
            :text="['告警']"
            :area="true"
            unit="次"
            :color="['#EDC303']"
          />
        </div>
        <div class="sensorSum">
          <p class="sum">近30天告警数量</p>
          <p>
            <span class="num" style="color: rgba(87, 255, 170, 100)">{{thirtyCount}}</span
            ><span class="piece">次</span>
          </p>
        </div>
        <div class="charttitle">近30天告警分析</div>
        <div class="outage" style="height:165px">
          <LineChart
            :chartData="thirtyLists"
            :text="['告警']"
            :area="true"
            unit="次"
            :color="['#57FFAA']"
          />
        </div>
      </div>
    </HerinContainer>
  </div>
</template>
<script>
import HerinContainer from '@/components/HerinContainer';
import LineChart from '@/components/chart/line/LineChart.vue';
import RoseChart from '@/components/chart/pie/RoseChart.vue';
import Legend1 from '@/components/chart/legend/Legend1.vue';

import { getServenTodayInfo, getThirtyTodayInfo, getTodayInfo, getTodayAreaInfo } from '@/api/item/monitor/video.js';
import { xFormat } from '@/utils/date';

export default {
  components: {
    HerinContainer,
    LineChart,
    Legend1,
    RoseChart
  },
  data() {
    return {
      color: ['#34C8FF', '#00FDFF', '#FB9B2A', '#FFFFFF'],
      servenCount: '',
      servenList: [],
      thirtyCount: '',
      thirtyList: [],
      todayCount: '',
      todayList: [],
      todayAreaList: [],
      actionLoopTimer3S: null,
      actionLoopTimer1H: null
    };
  },
  computed: {
    todayAreaLists() {
      const list = this.todayAreaList.map(item => {
        return {
          x: item.regionName,
          y: item.number * 1
        };
      });
      return list;
    },
    todayLists() {
      const list = this.todayList.map(item => {
        return {
          s: item.s,
          x: xFormat(item.x),
          y: item.y * 1
        };
      });
      return list;
    },
    servenLists() {
      const list = this.servenList.map(item => {
        return {
          s: item.s,
          x: item.x,
          y: item.y * 1
        };
      });
      return list;
    },
    thirtyLists() {
      const list = this.thirtyList.map(item => {
        return {
          s: item.s,
          x: item.x,
          y: item.y * 1
        };
      });
      return list;
    }
  },
  mounted() {
    this.startActionLoop3S(this.getTodayAreaInfo); // 每隔 3S 循环查询数据
    this.startActionLoop1H(this.allFu1H); // 每隔 1小时 循环查询
  },
  beforeDestroy() {
    this.actionLoopTimer3S && clearInterval(this.actionLoopTimer3S);
    this.actionLoopTimer3S = null;
    this.actionLoopTimer1H && clearInterval(this.actionLoopTimer1H);
    this.actionLoopTimer1H = null;
  },
  methods: {
    // 每隔 3S 循环查询数据
    startActionLoop3S(callback) {
      callback();
      this.actionLoopTimer3S = setInterval(callback, 3000);
    },
    // 每隔 1小时 循环查询
    startActionLoop1H(callback) {
      callback();
      this.actionLoopTimer1H = setInterval(callback, 3600000);
    },
    allFu1H() {
      this.getServenTodayInfo();
      this.getThirtyTodayInfo();
      this.getTodayInfo();
    },
    // 获取近7天告警数量
    async getServenTodayInfo() {
      const res = await getServenTodayInfo();
      if (res.data.code === 200) {
        if (res.data.data) {
          const { alarmDetail, count } = res.data.data;
          this.servenList = alarmDetail;
          this.servenCount = count;
        }
      }
    },

    // 获取近30天告警数量
    async getThirtyTodayInfo() {
      const res = await getThirtyTodayInfo();
      if (res.data.code === 200) {
        if (res.data.data) {
          const { alarmDetail, count } = res.data.data;
          this.thirtyList = alarmDetail;
          this.thirtyCount = count;
        }
      }
    },

    // 获取今日告警分析
    async getTodayInfo() {
      const res = await getTodayInfo();
      if (res.data.code === 200) {
        if (res.data.data) {
          const { dayAlarm } = res.data.data;
          this.todayList = dayAlarm;
        }
      }
    },

    // 获取今日告警数量和区域
    async getTodayAreaInfo() {
      const res = await getTodayAreaInfo();
      if (res.data.code === 200) {
        if (res.data.data) {
          const { underArea, count } = res.data.data;
          this.todayAreaList = underArea;
          this.todayCount = count;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.MainCoal-box {
  &-tab {
    display: flex;
    .btn {
      @include btn;
    }
    .isbtn {
      background-color: rgba(0, 228, 255, 0.2);
      color: $cyan;
    }
  }
  &-content {
    .mouldbox {
      margin-top: 1.875rem;
    }
    .mouldbox:first-child {
      margin-top: 0.3125rem;
    }
  }
  .num {
    font-size: 16px;
    text-align: right;
    font-family: Helvetica-bold;
    font-weight: 900;
  }
  .piece {
    color: rgba(131, 131, 131, 100);
    font-size: 12px;
    text-align: left;
    font-family: Helvetica-regular;
    margin: 0 0.9375rem 0 0.3125rem;
    display: inline;
  }
  .sensorSum {
    display: flex;
    width: 20.625rem;
    height: 2.5rem;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    padding: 0 0.625rem;
    p {
      display: flex;
      align-items: center;
    }
    .sum {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
      text-align: left;
      font-family: Helvetica-regular;
    }
  }
  .charttitle {
    font-size: 0.75rem;
    color: $light2Grey;
    margin: 0.625rem 0;
  }
  .Chart {
    display: flex;
    justify-content: space-between;
    margin: 10px 0 15px 0;
    .chat {
      width: 7.6875rem;
      height: 7.6875rem;
    }
    .cont {
      width: 12rem;
      height: 7.6875rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item{
        min-width: 4.5rem;
      }
    }
  }
  .outage {
    height: 8.5rem;
    margin-bottom: .9375rem;
  }
}
</style>
